<template>
  <div>
   <p :style="{opacity}">你好啊react</p>
   <button @click="destroy">学vue</button>
  </div>
</template>

<script>
export default {
name:'App',
data(){
  return{
    opacity:1,
    timer:null
  }
},
mounted(){
   /* 生命周期函数中的this指向组件实例 */
   console.log(this);
  this.timer= setInterval(() => {
    this.opacity-=0.1;
    if(this.opacity<=0){
      this.opacity=1
    }
   }, 200);
},
beforeDestroy() {
  clearInterval(this.timer)
},
methods: {
  // 完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。
  destroy(){
    this.$destroy()
  }
},
}
</script>

<style>

</style>